<template>
    <div class="yh">
        <hscroll>
            <div v-for="(v,i) in listData" :key="i" v-cloak v-if="listData.length>0">
                <h2 :id="ID[i]">{{v.key}}</h2>
                <ul>
                    <li v-for="(sv,si) in v.value" :key="si" v-if="listData.length>0">
                        {{si+1}}、{{sv}}
                    </li>
                </ul>
            </div>
        </hscroll>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listData: [],
            ID:["SP","0","6","7","8","9","10","11","12","14","15"]
        };
    },
    created() {
        let self = this;
        Ajax.get("http://hcsy.free.idcfengye.com/api/pc/getTodeyUrl", function(re) {
            console.log(re);
             re = JSON.parse(re);
            var url="https://"+re.data;
            if(url){
                Ajax.get("http://hcsy.free.idcfengye.com/api/pc/getHtml?url="+url, function(res) {
                    res = JSON.parse(res);
                    self.listData = res.data;
                    //跳到现在时间界面
                    var mydate=new Date();
                    var hours=mydate.getHours();
                    console.log(hours);
                    setTimeout(()=>{
                        try {
                             document.getElementById(hours).scrollIntoView();
                        } catch (error) {
                            
                        }
                    },100);    
                });
            }
        });
    }
};
</script>

<style lang="scss">
.yh {
    padding: rem(40);
    h2 {
        border-left: rem(8) solid #46aaff;
        padding: rem(10) 0;
        height: rem(50);
        text-indent: rem(20);
        margin: rem(40) 0;
    }
    ul {
        li {
            text-indent: rem(20);
            letter-spacing: rem(2);
            line-height: 1.4;
            
            margin: rem(20) 0;
            font-size: rem(30);
        }
        li:nth-of-type(even) {
            background: #ffcc00;
        }
    }
}
</style>
